<template>
    <div class="bg">
        <div class="welcome-title">
            <img src="../../assets/fx-logo.png" alt="">
            <p>智慧肥乡新型城乡一体化服务平台</p>
        </div>
        <div class="box">
            <ul class="box-ul">
                <li v-on:click="onSelect(item)" v-for="(item,index) in handleList" :key="index" class="box-li" 
                    :style="{'-webkit-transform': 'translate('+item.x+'vh,'+item.y+'vh'+')','-ms-transform': 'translate('+item.x+'vh,'+item.y+'vh'+')','-moz-transform': 'translate('+item.x+'vh,'+item.y+'vh'+')','-o-transform': 'translate('+item.x+'vh,'+item.y+'vh'+')','transform': 'translate('+item.x+'vh,'+item.y+'vh'+')'}">
                    <div class="outer-bg"></div>
                    <div class="inner-bg ">
                        <img :src="item.icon" alt="">
                        <p>{{item.name}}</p>
                    </div>
                </li>

            </ul>
            <div @click="onDefaultSelect" class="defulat-circle">
                <div class="outer-bg"></div>
                <div class="inner-bg">
                    <img src="../../assets/welcome/icon0.png" alt="">
                    <p>智慧党建</p>
                </div>
            </div>
        </div>
        <img class="logout-icon" @click="logout" src="../../assets/layout/header-logout.png" alt="">
    </div>
</template>

<script>
import { getPoint,getCookie,setCookie,removeCookie } from "../../utils";
import {selectWelcome} from "../../config/api";
import { loginOut } from "../../config/api";
let icon1 = require("../../assets/welcome/icon1.png");
let icon2 = require("../../assets/welcome/icon2.png");
let icon3 = require("../../assets/welcome/icon3.png");
let icon4 = require("../../assets/welcome/icon4.png");
let moreIcon = require("../../assets/welcome/more-icon.png");

const iconConfig = {
    zhzw: icon1,
    zhcg: icon2,
    zjfx: icon3,
    zhzz: icon4,
};

export default {
    name: "welcome",
    data() {
        let menuStr = localStorage.menu || "[]";
        let menu = JSON.parse(menuStr);
        let tempArr = [];
        menu.map(item => {
            //设置欢迎页选项。
            tempArr.push({
                name: item.name,
                resourceId: item.id,
                type: item.type,
                icon: iconConfig[item.aliasName],
                // x: 0,
                // y: 0,
                path: "/gov/unifiedWorkbench",
                url:item.url,
            });
        });
        //更多
        tempArr.push({ name: "更多", icon: moreIcon, x: 0, y: 0 });
        return {
            handleList: tempArr
        };
    },
    mounted() {
        this.timer = setTimeout(() => {
            let len = this.handleList.length;
            let point = getPoint(25, 0, 0, len);
            this.handleList.map((item, index) => {
                this.handleList[index].x = point[index].x.toFixed(2);
                this.handleList[index].y = point[index].y.toFixed(2);
            });
        }, 500);
    },
    destroyed(){
        this.timer && setInterval(this.timer);
    },
    watch: {
        handleList: function(val, old) {
            console.log(val, old);
        }
    },
    methods: {
        /**
         * 选择默认模块事件
         */
        onDefaultSelect(){
            window.open("http://116.132.54.126:8081","_blank");
        },
        /**
         * 退出
         */
        logout() {
            this.$confirm("请确认是否退出系统", "提示", {
                distinguishCancelAndClose: true,
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    loginOut().then(() => {
                        removeCookie("userInfo");
                        removeCookie("token");
                        localStorage.removeItem("subMenu");
                        localStorage.removeItem("menu");
                        localStorage.removeItem("pMenu");
                        this.$router.push("/login");
                    });
                })
                .catch(() => {});
        },
        /**
         * 选择模块
         */
        onSelect(item) {
            if (item.name != "更多") {
                if(item.name === "智能分析"){
                    this.$router.push("/dp1");
                    return;
                }
                if(item.url){
                    if(item.url.indexOf("http")>-1){
                        window.open(item.url,"_blank");
                    }else{
                        this.$router.push(item.url);
                    }
                    return;
                }
                let userInfoStr = getCookie("userInfo") || "{}";
                let userInfo = JSON.parse(userInfoStr);
                selectWelcome({
                    resourceId:item.resourceId,
                    personId:userInfo.personId
                }).then((result = {})=>{
                    let data = result.data || [];
                    let pMenu = [];
                    data.map((item)=>{
                        pMenu.push(item.url);
                    })
                    localStorage.subMenu = JSON.stringify(data);
                    localStorage.pMenu = JSON.stringify(pMenu);
                    setCookie("wsType",item.type);
                    let url = data[0].url;
                    if(url.indexOf("http")>-1){
                        window.open(url,"_blank");
                    }else{
                        this.$router.push(url);
                    }
                    // this.$router.push(data[0].url);
                    // this.$router.push("http://www.baidu.com")
                })
                //  this.$message({
                //     message: '没有更多了',
                //     type: 'warning'
                // });
                // return;
            }

            // this.$router.push(item.path);
        }
    }
};
</script>

<style scoped lang="scss">
.bg {
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: url("../../assets/welcome/welcome-bg.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}
.welcome-title {
    position: absolute;
    left: 5vmin;
    top: 4vmin;
    display: flex;
    align-items: center;
    img {
        height: 8vmin;
        // width: 12vmin;
    }
    p {
        font-family: TRENDS;
        font-size: 5vmin;
        color: #fff;
        margin-left: 20px;
    }
}
.box {
    height: 60vmin;
    width: 60vmin;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    position: relative;
    &-ul {
        height: 60vmin;
        width: 60vmin;
        border-radius: 50%;
        position: relative;
        // animation: move 30s linear infinite;
    }
    &-li {
        height: 20vmin;
        width: 20vmin;
        border-radius: 50%;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-top: -10vmin;
        margin-left: -10vmin;
        transition: all 1s linear;
        transform:translate(0,0);
        cursor: pointer;
    }
    .defulat-circle {
        height: 20vmin;
        width: 20vmin;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -10vmin;
        margin-left: -10vmin;
        cursor: pointer;
    }
    .outer-bg {
        background: url("../../assets/welcome/outer-bg.png");
        background-size: 100% 100%;
        height: 100%;
        animation: rotate 20s linear infinite;
        position: relative;
    }
    .inner-bg {
        background: url("../../assets/welcome/inner-bg.png");
        background-size: 100% 100%;
        position: absolute;
        height: 14vmin;
        width: 14vmin;
        top: 50%;
        left: 50%;
        margin-left: -7vmin;
        margin-top: -7vmin;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 2vmin;
        img {
            height: 3.6vmin;
        }
    }
    @keyframes rotate {
        to {
            transform: rotate(0deg);
        }
        from {
            transform: rotate(360deg);
        }
    }
}
.logout-icon{
    position: absolute;
    top:25px;
    right: 25px;
    cursor: pointer;
}
</style>



